<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/admin/teacherMgt' }">教师管理</el-breadcrumb-item>
                <el-breadcrumb-item>定时清理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">用户编号/用户名: </span>
                    <el-input v-model="username" placeholder="请输入用户编号/用户名" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <span class="search-title">时间范围: </span>
                    <el-select
                        v-model="dateValue"
                        placeholder="请选择时间范围"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="(item, index) in dateStatus"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <a :href="'/dataplatform/superAdmin/loginHistory/outputLoginHistory?timeInterval='+dateValue">
                        <el-button type="primary" @click="">导出数据</el-button>
                    </a>
                </div>
                <div class="search-item" style="float:right; margin-right:15px;">
                    <el-button type="primary" v-if="!cleanStatus" @click="timingFn">开启定时清理</el-button>
                    <el-button type="primary" @click="timingFn" v-else>关闭定时清理</el-button>
                </div>
            </div>
            <div class="table-content">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column prop="userNumber" label="用户编号">
                    </el-table-column>
                    <el-table-column prop="userName" label="用户名">
                    </el-table-column>
                    <el-table-column prop="loginIp" label="登录ip">
                    </el-table-column>
                    <el-table-column prop="country" label="国家">
                    </el-table-column>
                    <el-table-column prop="region" label="地区">
                    </el-table-column>
                    <el-table-column prop="city" label="市">
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间">
                    </el-table-column>
                    <el-table-column label="用户行为">
                        <template slot-scope="scope">
                            <span v-if="scope.row.action == 1">登录</span>
                            <span v-if="scope.row.action == 2">登出</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="tableData.length>0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                username: '',
                dateStatus: [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '5天',
                        value: '5'
                    },
                    {
                        label: '10天',
                        value: '10'
                    },
                    {
                        label: '15天',
                        value: '15'
                    },
                    {
                        label: '30天',
                        value: '30'
                    }
                ],
                dateValue: '',
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                cleanStatus: false
            }
        },
        created () {
            this.init()
            this.cleanStatusFn()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/superAdmin/loginHistory/listLoginHistory?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&timeInterval='+self.dateValue+'&userName='+self.username).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            cleanStatusFn(){
                let self = this
                self.$http.get('/dataplatform/superAdmin/loginHistory/getAutoCleanStatus').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.cleanStatus = res.data
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            timingFn(){
                let self = this
                self.$http.post('/dataplatform/superAdmin/loginHistory/setAutoCleanStatus').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.cleanStatusFn()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn() {
                this.currentPage = 1
                this.initTable()
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //搜索
            searchFn() {
                this.currentPage = 1
                this.init()
            },
        }
    }
</script>
